<template>
	<view class="page">
		<page-head :title="title"></page-head>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.img"></image>
					</view>
					<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
						<view class="text" style="height: 50upx;text-align: left">
							{{value.productName}}
						</view>
						<view class="uni-flex uni-row">
							<view class="text" style="flex: 1;">小代:{{value.price1}}</view>
							<view class="text" style="flex: 1;">大代:{{value.price2}}</view>
							<view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.price3}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'media-list',
				showImg: false,
				list: [{
						productName: '肤倍佳修护亮肤水',
						price1: '98',
						price2: '88',
						price3: '139'
					},
					{
						productName: '肤倍佳嫩肤水',
						price1: '128',
						price2: '98',
						price3: '169'
					},
					{
						productName: '肤倍佳修护精华乳',
						price1: '118',
						price2: '98',
						price3: '159'
					},
					{
						productName: '肤倍佳胶原眼霜',
						price1: '138',
						price2: '108',
						price3: '198'
					},
					{
						productName: '肤倍佳养颜霜',
						price1: '138',
						price2: '108',
						price3: '198'
					},
					{
						productName: '肤倍佳洗面奶',
						price1: '32',
						price2: '30',
						price3: '48'
					},
					{
						productName: '肤倍佳仙人掌面膜',
						price1: '88',
						price2: '78',
						price3: '128'
					},
					{
						productName: '肤倍佳硅霜',
						price1: '35',
						price2: '30',
						price3: '49'
					},
					{
						productName: '肤倍佳精华',
						price1: '198',
						price2: '168',
						price3: '268'
					},
					{
						productName: '肤倍佳唇膏',
						price1: '38',
						price2: '28',
						price3: '69'
					}

				]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showImg = true;
			}, 400)
		}
	}
</script>

<style>
	.title {
		padding: 20upx;
	}

	.uni-media-list-text-top {
		line-height: 36upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.flex-item {
		width: 33.3%;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
</style>
